<template>
    <div>
        <HeaderSimple />
        <div class="container">
            <div class="tip">帐号登录</div>
            <div class="form">
                <div>
                    <el-input class="input" v-model="username" placeholder="帐号"></el-input>
                </div>
                <div>
                    <el-input class="input" v-model="password" show-password placeholder="密码"></el-input>
                </div>
                <div>
                    <el-button class="btn" @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { setToken, postSync } from '@/util/request'
import HeaderSimple from '@/components/HeaderSimple.vue'
let _this = null
export default {
    name: 'Login',
    components: {
        HeaderSimple
    },
    data() {
        return {
            username: 'admin',
            password: '123456',
            disabled: true
        }
    },
    created() {
        _this = this
    },
    methods: {
        push: (name) => {
            _this.$router.push('/' + name)
        },
        login: () => {
            postSync('/api/user/login', {
                'username': _this.username,
                'password': _this.password
            }).then((res) => {
                if (res.code == 200) {
                    _this.$notify({
                        title: '成功',
                        message: '登录成功，即将跳转。',
                        duration: 2000,
                        type: 'success'
                    })
                    let token = res.data.token
                    setToken(token)
                    setTimeout(() => {
                        _this.push('Admin')
                    }, 500)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 968px;
    margin: auto;
    display: flex;
    flex-direction: column;

    .tip {
        text-align: center;
        font-size: 32px;
        font-weight: 400;
        padding: 100px 0 80px;
    }

    .form {
        width: 360px;
        margin: auto;

        .input {
            width: 360px;
            margin-bottom: 26px;

            :deep(.el-input__inner) {
                height: 48px;
                border-radius: 8px;
                background-color: #f2f2f2;
                border: none;
            }

            :deep(.el-input__prefix) {
                opacity: 0.9;
                color: #000;
            }
        }

        .btn {
            background-color: #ca141d;
            color: #fff;
            border: none;
            border-radius: 8px;
            width: 360px;
            height: 48px;
        }
    }
}
</style>